<template>
	<div id="login">
		<el-container class="subject">
			<el-main>
				<el-form ref="formName" :rules="rules" :model="formName">
					<h1>管理系统</h1>
					<el-form-item prop="username">
						<el-input placeholder="请输入账号" prefix-icon="el-icon-s-custom" v-model="formName.username">
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" prefix-icon="el-icon-lock"  v-model="formName.password" @keyup.enter.native="submitForm('formName')"
							show-password>
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-checkbox v-model="checked" label="记住密码" border></el-checkbox>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('formName')">登录</el-button>
					</el-form-item>
				</el-form>
				<p>超级管理员用户名: admin123 超级管理员用户名：admin123</p>
				<p>商城管理员用户名: mall123 商城管理员用户名：mall123</p>
				<p>推广管理员用户名: promotion123 推广管理员用户名：promotion123</p>
			</el-main>
		</el-container>
	</div>
</template>
<script>
	import {lshi,login} from '@/api/http.js'
	export default {
		data() {
			return {
				checked:true,
				formName: {
					username: "",
					password: "",
				},
				rules: {
					username: [{
							required: true,
							message: "用户名不能为空",
							trigger: 'blur'
						},
						{
							min: 6,
							message: "用户名不得少于6位",
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: "密码不能为空",
							trigger: 'blur'
						},
						{
							min: 6,
							message: "密码不得少于6位",
							trigger: 'blur'
						}
					]
				}
			};
		},
		mounted() {
			this.formName.username= window.decodeURI(window.atob(this.$cookie.get('username')))
			this.formName.password= window.decodeURI(window.atob(this.$cookie.get('password')))
		},
		methods: {
			submitForm(formName) {
				if(this.checked==true){
					this.$cookie.set("username",window.btoa(window.encodeURI(this.formName.username)),{expires:7})
					this.$cookie.set("password",window.btoa(window.encodeURI(this.formName.username)),{expires:7})
				}
				this.$refs[formName].validate((valid) => {
					let mima = {
						username: this.formName.username,
						password: this.formName.password
					}
					if (valid) {
						login(mima).then(res => {
							if (res.data.errmsg == "成功") {
								this.$cookie.set("tokens",res.data.data.token)
								this.getInfo()
								sessionStorage.setItem("name", "fixedRouter")
								sessionStorage.setItem("token", res.data.data.token)
								this.$router.push("/")
							} else {
								this.$message({
									message: '账号错误',
									type: 'warning'
								})
							}
						}).catch(res => {
							console.log(res)
						})
					} else {
						console.log('错误');
						return false;
					}
				});
			},
			// 登录权限
			getInfo() {
				lshi().then(res => {
					//将权限数据保存到临时存储中
					sessionStorage.setItem('power', res.data.data.perms);
					this.$router.push({
						path: '/'
					})
				})
			}
		},
	}
</script>

<style>
	#login {
		padding: 0px !important;
		text-align: center;
	}

	#login h1 {
		text-align: center;
		margin-bottom: 40px;
		color: #FFFFFF;
	}	

	#login .subject {
		height: 100vh;
		width: 100%;
		background-color: #2D3A4B;
	}

	#login .subject .el-main {
		margin: auto;
		background-color: #2D3A4B;
	}

	#login .subject .el-main .el-form-item {
		margin: auto;
		width: 30%;
		margin-bottom: 30px;
	}

	#login .subject .el-main .el-form-item input {
		margin: auto;
		height: 50px !important;
		background-color: #1f2935;
		color: #FFFFFF;
	}

	#login .subject .el-main .el-form-item .el-checkbox {
		width: 100%;
		text-align: left;
	}

	#login .subject .el-main .el-form-item button {
		width: 100%;
	}

	#login .subject .el-main p {
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
	}
</style>
